<style module>
.me {
  width: 100%;
  height: 300px;
  flex: 1 1 auto;
}
</style>
<template>
  <div ref="myChart" :class="$style.me" :style="chartStyle"></div>
</template>

<script>
import themes from "./echartThemes/themes";

export default {
  name: "starLine",
  data() {
    return {
      myChart: {},
      series:[]
    };
  },
  props: {
    data: {
      default: () => {
        return {
          categories: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
          values: {
            Email: [120, 132, 101, 134, 90, 230, 210],
            "Union Ads": [220, 182, 191, 234, 290, 330, 310],
            "Video Ads": [150, 232, 201, 154, 190, 330, 410],
            Direct: [320, 332, 301, 334, 390, 330, 320],
          },
        };
      },
    },
    chartStyle: {
      default: () => {},
    },
    config: {
      default: () => {
        return {
          type: "line",
          toolbox: true,
          xAxisNameLocation: "",
          boundaryGap: false,
          yAxisMin: 0,
          yAxisMax: 3000,
          yAxisNameLocation: "end",
          legend: true,
          smooth: true,
          markLine: false,
          kpi: null,
          stack: "",
          color: ['#5470c6', '#91cc75', '#fac858', '#ee6666', '#73c0de', '#3ba272', '#fc8452', '#9a60b4', '#ea7ccc'],
          //bar
          showBackground: true,
        };
      },
    },
    options:{
      default:()=>{
        return {}
      }
    },
    //国际化
    language: {
      default: () => {
        return {
          "en-US": {
            title: "title",
            xAxisTitle: "xAxisTitle",
            yAxisTitle: "yAxisTitle",
          },
          "zh-CN": {
            title: "标题",
            xAxisTitle: "x轴标题",
            yAxisTitle: "y轴标题",
          },
        };
      },
    },
  },
  computed: {
    option() {
      this.config.type = this.options.type || "line";
      let opt = {
        title: {
          text: this.language[this.G_Locale].title,
        },
        tooltip: {
          trigger: "axis",
        },
        grid: this.config.grid,
        toolbox: {
          show: this.config.toolbox,
          feature: {
            dataView: { show: true, readOnly: false },
            magicType: { show: true, type: ["line", "bar"] },
            restore: { show: true },
            saveAsImage: { show: true },
          },
        },
        color:this.config.color||["#5470c6","#91cc75","#fac858","#ee6666","#73c0de","#3ba272","#fc8452","#9a60b4","#ea7ccc"],
        xAxis: {
          type: "category",
          name: this.language[this.G_Locale].xAxisTitle,
          nameLocation: this.config.xAxisNameLocation,
          boundaryGap: this.config.boundaryGap,
          data: this.data.categories || [],
        },
        yAxis: {
          type: "value",
          min: this.config.yAxisMin,
          max: this.config.yAxisMax,
          name: this.language[this.G_Locale].yAxisTitle,
          nameLocation: this.config.yAxisNameLocation,
        },
        legend: {
          show: this.config.legend,
          bottom:0
        },
      };
      return this.tools.lodash.merge(opt,this.options);
    },
  },
  watch:{
    'data':{
      handler(data){
        if(!data.values){
          return;
        }
        this.series = this.getSeries()
        this.initChartOption();
      },
      deep:true
    }
  },
  mounted() {
    this.registerTheme();
    this.handleSetChart();
    const obs = new ResizeObserver((entries) => {
        this.handleResize();
    });
    obs.observe(this.$el.parentElement);
    console.log(this.data,"data");
  },
  methods: {
    registerTheme() {
      this.echarts.registerTheme("dark", themes.dark);
      this.echarts.registerTheme("light", themes.light);
      this.echarts.registerTheme("vintage", themes.vintage);
      this.echarts.registerTheme("westeros", themes.westeros);
      this.echarts.registerTheme("essos", themes.essos);
      this.echarts.registerTheme("wonderland", themes.wonderland);
      this.echarts.registerTheme("walden", themes.walden);
      this.echarts.registerTheme("chalk", themes.chalk);
      this.echarts.registerTheme("infographic", themes.infographic);
      this.echarts.registerTheme("macarons", themes.macarons);
      this.echarts.registerTheme("roma", themes.roma);
      this.echarts.registerTheme("shine", themes.shine);
      this.echarts.registerTheme("purplePassion", themes.purplePassion);
    },
    handleSetChart() {
      this.myChart = this.echarts.init(this.$el, this.config.theme);
      this.initChartOption();
    },
    initChartOption() {
      this.myChart.clear()
      switch (this.config.type) {
        case "line":
          this.buildLineOption();
          break;
        case "bar":
          this.buildBarOption();
          break;
        default:
          this.buildLineOption();
          break;
      }
    },
    buildLineOption() {
      let option = {
        ...this.option,
        series: this.series.length===0 ? this.getSeries() : this.series,
      };
      this.myChart.setOption(option);
      console.log(option)
    },
    buildBarOption() {
      let option = {
        ...this.option,
        series: this.series.length===0 ? this.getSeries() : this.series,
      };
      this.myChart.setOption(option);
    },
    handleResize() {
      this.myChart.resize();
    },
    getSeries(){
      let dataMap = this.data.values || {};
      let series = [];
      if (this.config.type === "line") {
        Object.keys(dataMap).map((k) => {
          let tmp = {
            name: k,
            type: "line",
            smooth: this.config.smooth,
            stack: this.config.stack,
            data: dataMap[k],
          };
          if(this.config.markLine) {
            tmp[markLine] = {
              lineStyle:{
                color: '#F56C6C',
                type: 'solid', // 实线
              },
              data: [
                {
                  yAxis: this.config.kpi, // 纵坐标的值，决定横向辅助线在y轴的位置
                  label:{
                    formatter: 'KPI',
                  },
                },
              ]
            }
          }
          series.push(tmp);
        });
      } else if (this.config.type === "bar") {
        Object.keys(dataMap).map((k) => {
          let tmp = {
            name: k,
            type: "bar",
            showBackground: this.config.showBackground,
            data: dataMap[k],
          };
          series.push(tmp);
        });
      }
      return series;
    }
  },
};
</script>

<style scoped></style>
